<template>
  <a-modal v-model:visible="vdata.isShow" :title=" vdata.isAdd ? '新增支付方式' : '修改支付方式' " :width="700" @ok="handleOkFunc">
    <a-form ref="infoFormModel" :model="vdata.saveObject" :label-col="{span: 6}" :wrapper-col="{span: 15}" :rules="vdata.rules">
      <a-form-item label="支付方式代码：" name="wayCode">
        <a-input v-model:value="vdata.saveObject['wayCode']" :disabled="!vdata.isAdd" />
      </a-form-item>
      <a-form-item label="支付方式名称：" name="wayName">
        <a-input v-model:value="vdata.saveObject['wayName']" />
      </a-form-item>
      <a-form-item label="产品类型" name="productType">
        <a-radio-group v-model:value="vdata.saveObject['productType']" button-style="solid" size="small">
          <a-radio-button value="PAY">支付产品</a-radio-button>
          <a-radio-button style="margin-left: 5px;" value="TRANSFER">转账产品</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="支付类型" name="wayType">
        <a-radio-group v-model:value="vdata.saveObject['wayType']" button-style="solid" size="small">
          <template v-if="vdata.saveObject['productType'] == 'PAY'">
            <a-radio-button value="WECHAT">微信</a-radio-button>
            <a-radio-button style="margin-left: 5px;" value="ALIPAY">支付宝</a-radio-button>
            <a-radio-button style="margin-left: 5px;" value="YSFPAY">云闪付</a-radio-button>
            <a-radio-button style="margin-left: 5px;" value="UNIONPAY">银联</a-radio-button>
            <a-radio-button style="margin-left: 5px;" value="DCEPPAY">数字人民币</a-radio-button>
            <a-radio-button style="margin-left: 5px;" value="OTHER">其他</a-radio-button>
          </template>

          <template v-else-if="vdata.saveObject['productType'] == 'TRANSFER'">
            <a-radio-button value="TRANSFER">转账</a-radio-button>
          </template>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import { API_URL_PAYWAYS_LIST, req } from '@/api/manage'
import { reactive,ref } from 'vue'
import { message } from 'ant-design-vue'
  const props =defineProps({
    callbackFunc: { type: Function, default: () => () => ({}) }
    })


  const infoFormModel = ref()
    const vdata =  reactive({
      isAdd: true, // 新增 or 修改页面标志
      isShow: false, // 是否显示弹层/抽屉
      saveObject: {}, // 数据对象
      wayCode: null, // 更新对象ID
      rules: {
        wayCode: [
          { required: true, message: '请输入支付方式代码', trigger: 'blur' }
        ],
        wayName: [
          { required: true, message: '请输入支付方式名称', trigger: 'blur' }
        ],
        wayType: [
          { required: true, message: '请选择支付类型', trigger: 'blur' }
        ],
        productType: [
          { required: true, message: '请选择产品类型', trigger: 'blur' }
        ]
      }
    })
 defineExpose({show})
    function show(wayCode) { // 弹层打开事件
      vdata.isAdd = !wayCode
      vdata.saveObject = {} // 数据清空

      if (infoFormModel.value !== undefined) {
        infoFormModel.value.resetFields()
      }

     
      if (!vdata.isAdd) { // 修改信息 延迟展示弹层
        vdata.wayCode = wayCode
        req.getById(API_URL_PAYWAYS_LIST, wayCode).then(res => { vdata.saveObject = res })
        vdata.isShow = true
      } else {
        vdata.isShow = true // 立马展示弹层信息
      }
    }
   function  handleOkFunc() { // 点击【确认】按钮事件
       infoFormModel.value.validate().then(valid =>{
          if (vdata.isAdd) {
              req.add(API_URL_PAYWAYS_LIST, vdata.saveObject).then(res => {
                message.success('新增成功')
                vdata.isShow = false
                props.callbackFunc() // 刷新列表
              })
            } else {
              req.updateById(API_URL_PAYWAYS_LIST, vdata.wayCode, vdata.saveObject).then(res => {
                message.success('修改成功')
                vdata.isShow = false
                props.callbackFunc() // 刷新列表
              })
            }
       })
      }
</script>
